<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../../js/vue.min.js"></script>
</head>
<body>

<div id="app" style="padding-bottom: 200px">
    <h3>带label的输入框</h3>
    <label style="display: inline-block;width: 100px">用户名:</label><input type="text"><br>
    <label style="display: inline-block;width: 100px">密码:</label><input >
    <myinput label="用户名" label-width="150px"></myinput>
    <myinput label="密码" prompt="请输入密码"></myinput>

    <h3>自动生成选项的下拉框</h3>
    <select>
        <option>初中</option>
        <option>高中</option>
        <option>专科</option>
        <option>本科</option>
    </select>

<!--    ref 用于定义组件变量名-->
<myselect :items="eduItems" label="学历" ref="mySlt"
          v-on:reset-color="resetColor"></myselect>

    <input v-model="color">
    <button @click="setColor">设置背景色</button>


</div>

<script>
    // 注册组件
    Vue.component("myinput",{
        // template 内部元素 必须是单根节点
        template: `
        <div style="padding: 5px">
            <label style="display: inline-block;"
                  :style="{width: this.labelWidth || '100px'}">
                  {{label}} :
            </label>
            <input :placeholder="placeholder">
        </div>
        `,
        // 定义组件属性 定义同样不能用驼峰命名法 使用时 vue 会转成驼峰命名
        // vue 组件属性 是只读的
        props : ["label", "label-width", "prompt"],
        // 数据模型
        data(){
            return {
                placeholder : null
            };
        },
        created(){
            this.placeholder = this.prompt || "请输入";
        },
        methods:{

        }
    })

    Vue.component("myselect",{
        // props 对象语法 可以限定属性的数据类型 和 验证规则
        props: {
            items: Array,   // 限定 items 必须是数组
            label: String   // 限定字符串类型
        },
        data() {
            return{
                bgcolor: '#eee'
            }
        },
        template: `
            <div :style="{backgroundColor : bgcolor}">
                <label>{{label || "下拉列表"}}</label>
                <select>
                    <option v-for="item, i in items">
                        {{i}} - {{item}}
                    </option>
                </select>
                <button @click="setParentColor">设置父对象的 color 值</button>
            </div>
        `,
        methods: {
            setParentColor(){
                // 直接访问父对象 (内置对象) 不建议使用
                // this.$parent.color = '#eee';

                // 自定义事件, 用$emit定义事件
                this.$emit("reset-color", '#eee', 1, 2);
            },
        }
    })


    // 创建vue对象
    var v = new Vue({
        el : "#app",    // 绑定元素
        data:{
            eduItems : ["初中", "高中", "专科", "本科"],
            color: '#ddd'
        },
        methods :{
            setColor(){
                // vue 的内置对象, 以$开头
                var mySlt = this.$refs.mySlt; // 引用组件元素
                // 访问组件内部属性
                mySlt.bgcolor = this.color;
            },
            resetColor(color, num1, num2){
                console.info(num1,num2);
                this.color = color;
            }
        }
    })
</script>
</body>
</html>